import React, { Component } from 'react'
import { Segment, Grid, Header } from 'semantic-ui-react'
import { DatesRangeInput } from 'semantic-ui-calendar-react';
import 'moment/locale/zh-cn';
import LeafletMapScene from './dataviz/map/page/LeafletMapScene';

class MainPanel extends Component{
    constructor() {
        super();
        this.state = {
            datesRange: ''
        }
    }

    handleChange = (event, {name, value}) => {
        if (this.state.hasOwnProperty(name)) {
            this.setState({ [name]: value });
        }
    }
    
    render() {
        return (
            <Segment style={{ padding: '6em 0em 0em' ,borderBottom: 'none' }} vertical>
                <Grid container stackable >
                    <Grid.Row>
                        <Grid.Column width={16}>
                            <Header as='h5' style={{ fontSize: '1.5em' }}>
                            你可以选择以下酒店...
                            </Header>
                            <LeafletMapScene></LeafletMapScene>
                        </Grid.Column>
                    </Grid.Row>
                    <Grid.Row>
                        <Grid.Column width={8}>
                            <Header as='h3' style={{ fontSize: '2em' }}>
                            自助预订酒店
                            </Header>
                            <DatesRangeInput name="datesRange" placeholder="From - To" style={{ width: '100%', border: '3px solid rgba(0,123,255,.8)' }}
                                localization='zh_cn' dateFormat='DD/MM/YYYY' closable={true}
                                value={this.state.datesRange} iconPosition="left" onChange={this.handleChange}/>
                        </Grid.Column>
                        <Grid.Column width={8}></Grid.Column>
                    </Grid.Row>
                </Grid>
            </Segment>          
        )
    }
}

export default MainPanel;